// components/scroll-big-photo/scroll-big-photo.js
import throttle from '../../utils/throttle.js';
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        imgArr: {
            type: Array,
            value: [],
        },
        desArr: {
            type: Array,
            value: [],
        },
        idArr: {
            type: Array,
            value: [],
        },
        width: {
            type: String,
            value: '480rpx',
        },
        height: {
            type: String,
            value: '320rpx',
        },
        // 图片间距
        gap: {
            type: String,
            value: '20rpx',
        },
        // 前边距
        prevMargin: {
            type: String,
            value: '30rpx',
        },
        // 后边距
        nextMargin: {
            type: String,
            value: '30rpx',
        },
        nav: {
            type: String,
            value: '',
        },
        dotsTotal: {
            type: Number,
        },
    },

    /**
     * 组件的初始数据
     */
    data: {
        activeIndex: 0,
    },

    lifetimes: {
        attached: function () {
            let _that = this;
            wx.getSystemInfo({
                success: function (res) {
                    let clientWidth = res.windowWidth,
                        rpxR = 750 / clientWidth;
                    _that.setData({
                        rpxR,
                    });
                },
            });
        },
    },

    /**
     * 组件的方法列表
     */
    methods: {
        changeNav: throttle((e) => {
            let { nav } = e.currentTarget.dataset;
            wx.navigateTo({
                url: `${nav}`,
            });
        }, 200),

        trigger() {
            this.triggerEvent('scrolltolower');
        },

        handleActiveDot(e) {
            console.log(e.detail, this.data.rpxR);
            let { scrollLeft } = e.detail;
            let activeIndex = Math.floor(
                ((scrollLeft + 125) * this.data.rpxR) / 500
            );
            this.setData({
                activeIndex,
            });
        },
    },
});
